<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <title>MeetSmart - 个人资料</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" th:href="@{/css/style.css}">

    <!-- 引入必要的JS库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>

    <!-- 引入自定义JS -->
    <script th:src="@{/js/app.js}"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- 导航栏代码与dashboard.html相同 -->
</nav>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5><i class="bi bi-person-badge"></i> 个人信息</h5>
                </div>
                <div class="card-body text-center">
                    <img src="https://via.placeholder.com/150" class="rounded-circle mb-3" alt="用户头像">
                    <h4 sec:authentication="name"></h4>
                    <p class="text-muted" sec:authentication="principal.authorities"></p>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5><i class="bi bi-gear"></i> 账户设置</h5>
                </div>
                <div class="card-body">
                    <ul class="nav nav-tabs" id="profileTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">基本信息</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button" role="tab">修改密码</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="bookings-tab" data-bs-toggle="tab" data-bs-target="#bookings" type="button" role="tab">我的预约</button>
                        </li>
                    </ul>
                    <div class="tab-content mt-3" id="profileTabContent">
                        <div class="tab-pane fade show active" id="basic" role="tabpanel">
                            <form>
                                <div class="mb-3">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="username" value="user123" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">电子邮箱</label>
                                    <input type="email" class="form-control" id="email" value="user@example.com">
                                </div>
                                <button type="submit" class="btn btn-primary">保存更改</button>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="password" role="tabpanel">
                            <form>
                                <div class="mb-3">
                                    <label for="currentPassword" class="form-label">当前密码</label>
                                    <input type="password" class="form-control" id="currentPassword">
                                </div>
                                <div class="mb-3">
                                    <label for="newPassword" class="form-label">新密码</label>
                                    <input type="password" class="form-control" id="newPassword">
                                </div>
                                <div class="mb-3">
                                    <label for="confirmPassword" class="form-label">确认新密码</label>
                                    <input type="password" class="form-control" id="confirmPassword">
                                </div>
                                <button type="submit" class="btn btn-primary">修改密码</button>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="bookings" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>会议室</th>
                                        <th>时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>会议室A</td>
                                        <td>2023-05-10 09:00 - 11:00</td>
                                        <td><span class="badge bg-success">已批准</span></td>
                                        <td><a href="#" class="btn btn-sm btn-outline-danger">取消</a></td>
                                    </tr>
                                    <tr>
                                        <td>会议室B</td>
                                        <td>2023-05-12 14:00 - 16:00</td>
                                        <td><span class="badge bg-warning">待审核</span></td>
                                        <td><a href="#" class="btn btn-sm btn-outline-danger">取消</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>